<template>
	<view class="find-page">
		<view class="container">
			<common-car ref="myCart" @toBuy="confirmBuy"></common-car>
		</view>		
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import $U from '@/common/free-lib/util.js';
	import $H from '@/common/free-lib/request.js';
	import commonCar from '@/components/lebron-car/commonCar.vue'
	export default {
		components: {
			freeNavBar,
			commonCar
		},
		data() {
			return {
				phoneHeight: 0, //屏幕可用高度
				topHeight: 0, //滑块上方高度
				bottomHeight: 0, //底部高度
				scrollerHeight: 0,
				scrollIntoXView: '',
				listData: [],
				selectAll:false,
				totalMoney:0.0,
				queryForm: {
					pageNo: 1,
					pageSize: 10
				}
			}
		},
		onLoad(e) {
			
		},
		onShow() {
			// this.getCartList()
			this.$store.commit('loadUserData');
			console.log('购物车');
			this.$refs.myCart.getCartList();
		},
		onReady() {
			
			var height
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.phoneHeight = res.windowHeight;
					//console.log("phoneHeight:" + res.windowHeight)
					_this.$nextTick(() => {
						let view = uni.createSelectorQuery().select("#foot"); //局部滑块
						view.boundingClientRect(data => {
							if(data && data.height) {
								_this.topHeight = data.height;
								height = _this.phoneHeight - _this.topHeight;
								_this.scrollerHeight = height;
							}							
						}).exec();
					})
				},
			}); 		
		},
		computed: {
		},
		methods: {
			parseSkuName(list) {
				// console.log(list)
				let label = ''
				if(list && list.length > 0) {
					list.forEach((p,i) => {
						label += p.valueName;
						if(i < (list.length - 1) ) {
							label += '、';
						}
					})
				}
				return label;
			},
			parsePrice(price) {
				return $U.fenToYuan(price);
			},
			chooseHandle(item) {
				if(item && item.id) {
					let ids = [];
					item.selected = !item.selected
					ids.push(item.id)
					this.submitSelect(ids, item.selected);
					this.isSelectAll();
				}				
			},
			submitSelect(ids, s) {
				let data = {ids: ids, selected: s};
				$H.put('/trade/cart/update-selected', data).then(res => {
					
				})
			},
			selectAllHandle() {
				if(this.listData && this.listData.length > 0) {
					let s = !this.selectAll;
					let ids = [];
					this.listData.forEach(item => {
						item.list.forEach(c => {
							c.selected = s;
							ids.push(c.id);
						})
						
					})
					this.selectAll = s;
					this.submitSelect(ids, s);
				}				
			},
			changeCartNum(val, id) {
				if(val && id) {
					let _this = this;
					let data = {id: id, count: val};
					$H.put('/trade/cart/update-count', data).then(res => {
						_this.isSelectAll();
					})
				}
				
			},
			getCartList() {
				let _this = this;
				if($U.isLogin()) {
					$H.get('/trade/cart/myCartList', this.queryForm).then(res => {
						if(res) {
							_this.listData = res;
							_this.isSelectAll();
						}
					})
				}
				else {
					let url = '/pages/tabbar/find/find';
					uni.navigateTo({url: '/pages/common/login/login?from=' + url})
				}
			},
			removeCartItem() {
				if(this.listData && this.listData.length > 0) {
					let ids = [];
					this.listData.forEach(item => {
						item.list.forEach(c => {
							if(c.selected) {
								ids.push(c.id);
							}							
						})
					})
					if(ids.length > 0) {
						let _this = this;
						uni.showModal({
							title: '提示',
							content: '确认移除购物车？',
							success: function (res) {
								if (res.confirm) {
									let data = {ids: ids, selected: false}
									$H.post('/trade/cart/delete', data).then(res => {
										_this.getCartList();
										_this.$store.commit('initHome');
									})
								} else if (res.cancel) {
									return;
								}
							}
						});						
					}
					else {
						uni.showToast({
							title: '请选择需要移出购物车的商品',
							icon: 'none'
						});
					}
				}
				else {
					uni.showToast({
						title: '请选择需要移出购物车的商品',
						icon: 'none'
					});
				}
			},
			isSelectAll() {
				if(this.listData && this.listData.length > 0) {
					let count = 0;
					let total = 0;
					let money = 0;
					let _this = this;
					this.listData.forEach(item => {
						if(item.list && item.list.length > 0) {
							// console.log(item)
							item.list.forEach(cart => {
								total++;
								if(cart.selected) {
									count++;
									money += cart.sku.price * cart.count
								}
							})
						}
						
					})
					this.totalMoney = $U.fenToYuan(money);
					if(total == count) {
						this.selectAll = true;
					}
					else {
						this.selectAll = false;
					}
				}
				else {
					this.totalMoney = 0.00;
				}
			},
			confirmBuy(list) {
				if(list && list.length > 0) {
					uni.navigateTo({url: '/pages/common/payment?items=' + JSON.stringify(list)});
				}
				//处理选中类目
				// let items = [];
				// this.listData.forEach(item => {
				// 	item.list.forEach(c => {
				// 		if(c.selected) {
				// 			// let item = {skuId: c.sku.id, count: c.count, cartId: c.id};
				// 			items.push(c);
				// 		}
				// 	})
					
				// })
				// if(items.length > 0) {	
				// 	if(items.length <= 10) {
				// 		// 跳转到订单页
				// 		uni.navigateTo({url: '/pages/common/payment?items=' + JSON.stringify(items)});
				// 	}
				// 	else {
				// 		uni.showToast({
				// 			title: '抱歉，一次下单只能购买最多10个商品',
				// 			icon: 'none'
				// 		});
				// 	}
				// }
				// else {
				// 	uni.showToast({
				// 		title: '请选择需要购买的商品',
				// 		icon: 'none'
				// 	});
				// }
			},
			upper() {
				// console.log(666)
			},
			lower() {
				this.queryForm.pageNo += 1;
				this.getCartList()
			},
			scroll() {
				// console.log(7777)
			},
			onPulling() {
				// console.log(4444)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.find-page {
		position: relative;
		.container {
			width: 100%;
			border-top: 1px solid #F9F9F9;
			/deep/ .scroll-Y {
				padding-top: 0; 
				padding-left: 0;
				
				/deep/ .uni-section__content-title {
					font-weight: bold;
					font-size: 30rpx;
					color: #222222;
					line-height: 0rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
			/deep/ .scroll-view-item {
				position: relative;
				height: 220rpx;
				padding-left: 94rpx;
				background: #fff;
				border-bottom: 1px solid #EBEBEB;
				.image {
					width: 180rpx;
					height: 180rpx;
				}
				
				.subtitle {
					position: relative;
					width: 100%;
					top: 35rpx;
					height: 80rpx;
					.text {
						margin-top: 20rpx;
						color: #666666;
						line-height: 33rpx;
						font-size: 24rpx;
					}
					.value {
						margin-top: 15rpx;
						color: #666666;
						line-height: 40rpx;
						font-size: 24rpx;
						.price {
							position: relative;
							float: left;
							line-height: 40rpx;
							color: #FD5052;
							font-weight: bold;
							font-size: 34rpx;
						}
						.stock {
							position: relative;
							float: right;
							line-height: 40rpx;
						}
					}
				} 
			
				.more {
					position: absolute;
					bottom: 35rpx;
					right: 20rpx;
					width: 46rpx;
					height: 46rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
				}
			}
			.cart-item {
				position: relative;
				width: 750rpx;
				height: 200rpx;
				display: flex;
				.cart-item-head {
					position: relative;
					width: 280rpx;
					height: 200rpx;
					float: left;
					display: flex;
					.cart-item-check {
						position: relative;
						width: 70rpx;
						height: 200rpx;
						line-height: 200rpx;
						padding: 4rpx;
						float: left;
						display: flex;
					}
					.cart-item-image {
						position: relative;
						width: 180rpx;
						height: 200rpx;
						padding: 4rpx;
						float: left;
						display: flex;
						align-items: center;
					}
				}
				.cart-item-body {
					position: relative;
					width: 470rpx;
					height: 110rpx;
					float: left;
					padding-top: 10rpx;
					.cart-title {
						position: relative;
						width: 470rpx;
						height: 60rpx;
						line-height: 50rpx;
						display: flex;
						float: left;
						.title {
							font-weight: 400;
							font-size: 28rpx;
							color: #222222;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;  
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: normal;
							max-height: 3.0em; /* 设置为行高的两倍 */
							line-height: 1.5em;
							max-height: 3em; /* 最大高度为行高的两倍 */
						}
					}
					.cart-sku {
						position: relative;
						width: 470rpx;
						height: 30rpx;
						line-height: 30rpx;
						display: flex;
						float: left;
						.text {
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 30rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
				}
				.cart-item-footer {
					position: absolute;
					width: 470rpx;
					height: 80rpx;
					line-height: 70rpx;
					left: 300rpx;
					top: 140rpx;
					float: left;
					display: flex;
					.cart-price {
						position: relative;
						width: 50%;
						height: 80rpx;
						float: left;
						display: flex;
						line-height: 70rpx;
						.price {
							position: relative;
							float: left;
							line-height: 70rpx;
							color: #FD5052;
							font-weight: bold;
							font-size: 34rpx;
						}
					}
					.cart-num {
						position: relative;
						width: 50%;
						height: 80rpx;
						line-height: 70rpx;
						float: left;
						display: flex;						
						.stock {
							position: relative;
							float: right;
							line-height: 40rpx;
						}
					}
				}
				
			}
		}
		.foot {
			position: fixed;
			bottom: 0px;
			left: 0;
			width: 100%;
			z-index: 999;
			background: #fff;
			
			.footer-top {
				height: 90rpx;
				border-bottom: 1px solid #EBEBEB;
				padding: 0 30rpx;
				align-items: center;
				font-size: 28rpx;
				justify-content: space-between;
				.select-all {
					align-items: center;
				}
				
				.select-all-btn {
					width: 34rpx;
					height: 34rpx;
					border-radius: 200px;
					border: 1px solid #999999;
					margin-right: 14rpx;
				}
				.btns {
					.btn {
						height: 50rpx;
						line-height: 46rpx;
						border-radius: 200px;
						border: 1px solid #999999;
						padding: 0 36rpx;
						margin-right: 20rpx;
						font-size: 24rpx;
						cursor: pointer;
					}
					.up {
						color: #FD5052;
						border-color: #FD5052;
					}
				}
			}
			.add {
				padding: 8rpx 30rpx;
				
				.add-product {
					border-radius: 200px;
					font-size: 28rpx;
					height: 90rpx;
					align-items: center;
					justify-content: center;
					color: #fff;
					cursor: pointer;
				}
			}
		}
	}
</style>
